<template>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column label="产品名称" width="140" prop="name">
			<template #default="scope">
				<span>{{ scope.row.name }}</span>
			</template>
		</el-table-column>
		<el-table-column label="最高可贷额度" width="160" prop="maxMoney">
			<template #default="scope">
				<span>{{ scope.row.maxMoney }}</span>
			</template>
		</el-table-column>
		<el-table-column label="利息" width="160" prop="interest">
			<template #default="scope">
				<span>{{ scope.row.interest }}</span>
			</template>
		</el-table-column>
		<el-table-column label="最长期限" width="160" prop="maxMonth">
			<template #default="scope">
				<span>{{ scope.row.maxMonth }}</span>
			</template>
		</el-table-column>
		<el-table-column label="发布机构" width="160" prop="institution">
			<template #default="scope">
				<span>{{ scope.row.institution }}</span>
			</template>
		</el-table-column>
		<el-table-column label="还款方式" width="160" prop="repay">
			<template #default="scope">
				<span>{{ scope.row.repay }}</span>
			</template>
		</el-table-column>
		<el-table-column label="使用对象" width="160" prop="useObject">
			<template #default="scope">
				<span>{{ scope.row.useObject }}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="160">
			<template #default="scope">
				<el-button
					size="small"
					type="primary"
					@click="handleLook(scope.$index, scope.row)"
					>用户申请列表</el-button
				>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		layout="prev, pager, next"
		:total="total"
		@current-change="handleChange"
	/>
</template>

<script setup lang="ts">
import { useProductStore } from "../../store/product";
import { userProductGet } from "../../api/product";
import { productType } from "../../types/product";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const store = useProductStore();
let tableData = ref<productType[]>([]);
const total = ref(0);
//查询产品接口
userProductGet(1).then((res) => {
	store.productList = res.data.results;
	tableData.value = res.data.results;
	total.value = res.data.count;
});
const handleLook = (index: number, row: any) => {
	router.push({
		path: "/orders/usersList",
		query: { productName: row.name },
	});
};

//分页按钮
const handleChange = (num: number) => {
	userProductGet(num).then((res) => {
		store.productList = res.data.results;
		tableData.value = res.data.results;
		total.value = res.data.count;
	});
};
</script>

<style scoped>
:deep(.cell) {
	text-align: center;
}
.label {
	border-radius: 4px;
	background-color: #ecf7fd;
	color: #268be9;
	margin: 0;
	padding: 5px 10px;
	margin-bottom: 5px;
}
</style>
